<template>
  <el-container class="layout-container-demo" style="height: 1000px">
    <el-aside width="200px" height="3000px">
      <Aside></Aside>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <Header></Header>
      </el-header>

      <el-main height="3600px">
        <!-- <Main></Main> -->
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>


<style>
 .layout-container-demo .el-header {
   position: relative;
   background-color: var(--el-color-primary-light-7);
   color: var(--el-text-color-primary);
 }
 .layout-container-demo .el-aside {
   color: var(--el-text-color-primary);
   background: var(--el-color-primary-light-8);
 }
 .layout-container-demo .el-menu {
   border-right: none;
 }
 .layout-container-demo .el-main {
   padding: 0;
 }
 .layout-container-demo .toolbar {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   right: 20px;
 }
</style>

<script>
  import axios from "axios"
  import Aside from "@/components/Aside.vue"
  import Header from "@/components/Header.vue"
  import { ref } from 'vue'
  import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
  export default {
    components:{Aside,Header},
    data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
        tableData: Array(20).fill(item)
      }
    },
    methods:{
        loadGet(){
            axios.get('http://localhost:8090/user/list').then(res=>res.data).then(res=>{
                console.log(res);
            }) 
            console.log("测试！！！！！！");
        },
        loadPost(){
          axios.post('http://localhost:8090/user/listP',{}).then(res=>res.data).then(res=>{
                console.log(res);
            }) 
        }
    },
    beforeMount(){
        
    },
    
  };
</script>